import React, { useState, useEffect, useRef, useMemo, useReducer } from 'react';
import ReactDOM from 'react-dom';

import { HotTable } from '@handsontable/react';
import Handsontable from 'handsontable';
const licenseKey = '22061-34b57-72013-74b09-0e213';
export const Table1Api = {}
window.Table1Api = Table1Api
export default function Table1(props) {
    const { onRender = () => { } } = props
    const [data, sourceDataObjectSet] = useState(sourceDataObject)
    const [settings, setState] = useReducer((state, action) => ({ ...state, ...action }), {
        preventOverflow: 'horizontal',
        rowHeaders: true,
        colHeaders: ['分类', '艺术', '标题', '唱片集', '标签'],
        nestedRows: true,
        contextMenu: true,
        bindRowsWithHeaders: true,
        licenseKey: 'non-commercial-and-evaluation',
        manualRowMove: true,
        afterRowMove(movedRows, finalIndex, dropIndex, movePossible, orderChanged) {
            console.debug('%c movedRows, finalIndex, dropIndex, movePossible, orderChanged', 'font-size:30px;', movedRows, finalIndex, dropIndex, movePossible, orderChanged)
        },
        beforeRowMove  (movedRows, finalIndex, dropIndex, movePossible) {
            console.debug(movedRows, finalIndex, dropIndex, movePossible)
        }        
    })
    const hotTableRef = useRef();
    Object.assign(Table1Api, { settings, setState, hotTableRef, data, sourceDataObjectSet })
    onRender({ settings, setState, hotTableRef, data })
    return (
        <div>
            <HotTable
                ref={hotTableRef}
                settings={settings}
                data={data}
                licenseKey={licenseKey}

            />
        </div>
    );
}

const sourceDataObject = [
    {
        category: '1',
        artist: 'artist-1',
        title: 'title-1',
        label: 'label-1',
        __children: [
            {
                title: 'title1-1',
                artist: 'artist1-1',
                label: 'label1-1',
                category: '1-1',
                __children: [
                    {
                        title: 'Drones',
                        artist: 'Muse',
                        label: 'Warner Bros. Records',
                    }, {
                        title: 'Chaos And The Calm',
                        artist: 'James Bay',
                        label: 'Republic',
                    }, {
                        title: 'Kintsugi',
                        artist: 'Death Cab For Cutie',
                        label: 'Atlantic',
                    }, {
                        title: 'Mister Asylum',
                        artist: 'Highly Suspect',
                        label: '300 Entertainment',
                    }, {
                        title: '.5: The Gray Chapter',
                        artist: 'Slipknot',
                        label: 'Roadrunner Records',
                    }
                ]
            },
            {
                title: 'title1-2',
                artist: 'artist1-2',
                label: 'label 1-2',
                category: '1-2',
                __children: [
                    {
                        title: 'Drones',
                        artist: 'Muse',
                        label: 'Warner Bros. Records',
                    }, {
                        title: 'Chaos And The Calm',
                        artist: 'James Bay',
                        label: 'Republic',
                    }, {
                        title: 'Kintsugi',
                        artist: 'Death Cab For Cutie',
                        label: 'Atlantic',
                    }, {
                        title: 'Mister Asylum',
                        artist: 'Highly Suspect',
                        label: '300 Entertainment',
                    }, {
                        title: '.5: The Gray Chapter',
                        artist: 'Slipknot',
                        label: 'Roadrunner Records',
                    }
                ]
            },
        ]
    },
    {
        category: '2',
        artist: 'artist-2',
        title: 'title-2',
        label: 'label-2',
        __children: [
            {
                title: 'Cirice',
                artist: 'Ghost',
                label: 'Loma Vista Recordings'
            },
            {
                title: 'Identity',
                artist: 'August Burns Red',
                label: 'Fearless Records'
            },
            {
                title: '512',
                artist: 'Lamb Of God',
                label: 'Epic Records'
            },
            {
                title: 'Thank You',
                artist: 'Sevendust',
                label: '7Bros Records'
            },
            {
                title: 'Custer',
                artist: 'Slipknot',
                label: 'Roadrunner Records'
            },
        ]
    }
];

